<template>
  <span v-if="!isEdit">
    <el-tooltip v-if="styleTypeEnum.templateSrc" effect="light" placement="top">
      <div>{{ styleTypeEnum.label }}</div>
      <div slot="content">
        <img
          class="template-img"
          :src="styleTypeEnum.templateSrc"
          :alt="styleTypeEnum.label"
        >
      </div>
    </el-tooltip>
    <div v-else>{{ styleTypeEnum.label }}</div>
  </span>
  <span v-else>
    <el-radio-group v-model="currentValue">
      <el-radio
        v-for="{ label, value: eValue, templateSrc } in enums"
        :key="eValue"
        :label="eValue"
      >
        <el-tooltip v-if="templateSrc" effect="light" placement="top">
          <span>{{ label }}</span>
          <div slot="content">
            <img class="template-img" :src="templateSrc" :alt="label">
          </div>
        </el-tooltip>
        <span v-else>{{ label }}</span></el-radio>
    </el-radio-group>
  </span>
</template>

<script>
import GetEnumsValueMixin from 'modules/mixins/get-enums-value'
export default {
  mixins: [GetEnumsValueMixin],
  props: {
    prop: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      default: ''
    },
    enums: {
      type: [Array, Object],
      default() {
        return []
      }
    },
    isEdit: Boolean
  },
  computed: {
    styleTypeEnum() {
      return this.enums.find(i => i.value === this.value) || {}
    },
    currentValue: {
      get() {
        return this.value === undefined ? '' : this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style scoped>
.template-img {
  width: 300px;
}
</style>
